<template>
  <div>
    <div style="margin: 0 auto">
      <el-transfer
        v-model="value"
        :data="data"
        @change="handleChange"
      ></el-transfer>
    </div>
    <div style="margin: 0 auto">
      <el-button type="primary">发送邮件</el-button>
    </div>
    <div style="margin: 0 auto">
      <el-tag>{{ value }}</el-tag>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      data: [],
      value: [],
      info: null,
    };
  },
  mounted() {
    this.$axios
      .get("http://localhost:44332/api/values/GetProseFromDb")
      .then((response) => {
        // console.log(response);
        // console.log(response.data.title);

        var array = JSON.parse(response.data);
        // console.log(array)
        // console.log(array.length)
        for (let index = 0; index < array.length; index++) {
          const element = array[index];
          console.log(element);
          this.value.push(element.title);
        }
        //console.log(obj);
        //  console.log(response.data.length);

        // this.value = response.data.title;
      })
      .catch(function (error) {
        // 请求失败处理
        console.log(error);
      });

    this.$axios
      .get("http://localhost:44332/api/values/GetProse")
      .then((response) => {
        // console.log(response);
        this.info = response.data.split("\r\n");
        // console.log(this.info.length);

        for (let i = 1; i <= this.info.length; i++) {
          this.data.push({
            key: this.info[i - 1],
            label: this.info[i - 1],
            // disabled: i % 4 === 0,
          });
        }
      })
      .catch(function (error) {
        // 请求失败处理
        console.log(error);
      });
  },
  methods: {
    add(value) {
      this.$axios({
        url: "http://localhost:44332/api/values/Add",
        method: "post",
        data: { title: value },
        headers: {
          "Content-type": "application/json",
        },
      })
        .then((res) => {
          // console.log(1234, res.data);
        })
        .catch((error) => {
          console.log(error);
        });
    },
    delete(value) {
      console.log(value);
      this.$axios({
        url: "http://localhost:44332/api/values/Delete",
        method: "post",
        data: { title: value },
        headers: {
          "Content-type": "application/json",
        },
      })
        .then((res) => {
          console.log(1234, res.data);
        })
        .catch((error) => {
          console.log(error);
        });
    },
    handleChange(value, direction, movedKeys) {
      //  console.log(movedKeys);
      // console.log(direction);
      // console.log(label)
      if (direction == "right") {
        this.add(movedKeys[0]);
      } else if (direction == "left") {
        this.delete(movedKeys[0]);
      }
    },
  },
};
</script>

<style>
</style>